<template>
    <div :class="[type === 'horizantal' ? 'vm-card-horizantal' : 'vm-card-vertical' , 'vm-panel']">
        <!--     <div class="card-img">
                 <img style="border-radius: 20px" :src="img" alt="">
                 <div v-if="editable && type == 'vertical'" class="control">
             <span class="edit">
               <a :href="editUrl">
                 <i class="fa fa-pencil"></i>
               </a>
             </span>
                     <span class="delete">
               <i class="fa fa-trash" @click="modalDelete=true"></i>
             </span>
                 </div>
             </div>-->

        <div class="ih-item">

            <a href="#">
                <div class="img">
                    <img style="border-radius: 20px" :src="img" alt="">
                </div>
                <div class="info" style="line-height: 100px" @click="profile(id)">

                </div>
            </a>
        </div>


        <div class="card-desc panel-body">
            <!--  <h2>{{ title }}</h2>
              <p>{{ desc }}</p>
              <a :href="detailUrl">
                more >
              </a>-->
        </div>


        <Modal
                v-model="modalDelete"
                title="Delete"
                ok-text="OK"
                cancel-text="Cancel"
                v-on:on-ok="deleteOk">
            Are you sure to delete this data?
        </Modal>
    </div>
</template>
<script>
    export default {
        name: 'VmCard',
        props: {
            type: {
                type: String,
                default: 'vertical'
            },
            editable: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: 'Title'
            },
            img: {
                type: String
            },
            sysGroupId: {
                type: String
            },
            id: {
                type: String
            },
            desc: {
                type: String,
                default: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry,Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s'
            },
            detailUrl: {
                type: String,
                default: '#'
            },
            editUrl: {
                type: String,
                default: '#'
            }
        },
        data: function () {
            return {
                modalDelete: false
            }
        },

        methods: {
            deleteOk: function () {
                this.$emit('delete-ok')
            },
            profile(id) {
                this.$router.push({
                    name: 'ImgRecPro',
                    params: {
                        recid: id
                    }
                })
            }
        },
        mounted: function () {
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .ih-item {
        position: relative;
        width: 290px;
        height: 260px;
        float: left;
        margin-left: 40px;
        margin-bottom: 40px;
    }

    .ih-item .img img {
        position: relative;
        width: 290px;
        height: 260px;
        max-width: 100%;
    }

    .ih-item .info {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        -webkit-backface-visibility: hidden; /* 隐藏旋转元素的背面*/
        backface-visibility: hidden;
        background: rgba(0, 0, 0, 0.6); /*后面这个0.6是指的背景的透明度*/
        opacity: 0;
        -webkit-transition: all 0.35s ease-in-out; /*规定提示信息怎样出现ease-in-out以慢速度开始和结束*/
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
        border-radius: 20px;
        color: #ffffff;
    }

    .ih-item a:hover .info {
        opacity: 1; /*有opacity有0变成1*/
    }
</style>
